import { useSprings, animated } from '@react-spring/web'

import './index.css';
import { useRef } from 'react';
import { useDrag } from '@use-gesture/react';

const pages = [
    'https://images.pexels.com/photos/62689/pexels-photo-62689.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    'https://images.pexels.com/photos/733853/pexels-photo-733853.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    'https://images.pexels.com/photos/4016596/pexels-photo-4016596.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    'https://images.pexels.com/photos/351265/pexels-photo-351265.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
    'https://images.pexels.com/photos/924675/pexels-photo-924675.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
]

function ReactSpringGestureTest() {
    const index = useRef(0)
    const width = window.innerWidth;

    const [props, api] = useSprings(pages.length, i => ({
        x: i * width,
        scale: 1
    }));

    // movement 是拖动距离 [x, y]
    // direction 是拖动方向 [x, y]，1 代表向左（向上）、-1 代表向右（向下）
    // active 是当前是否在拖动。
    // cancel 方法可以中止事件。

    const bind = useDrag(({ active, movement: [mx], direction: [xDir], cancel }) => {
        if (active && Math.abs(mx) > width / 2) {
            let newIndex = index.current + (xDir > 0 ? -1 : 1);

            if (newIndex < 0) {
                newIndex = 0;
            }

            if (newIndex > pages.length - 1) {
                newIndex = pages.length - 1;
            }

            index.current = newIndex;

            cancel()
        }
        api.start(i => {
            const x = (i - index.current) * width + (active ? mx : 0)
            const scale = active ? 1 - Math.abs(mx) / width / 2 : 1
            return { x, scale }
        })
    })

    return (
        <div className='wrapper'>
            {props.map(({ x, scale }, i) => (
                <animated.div className='page' {...bind()}  key={i} style={{ x }}>
                    <animated.div style={{ scale, backgroundImage: `url(${pages[i]})` }} />
                </animated.div>
            ))}
        </div>
    )
}

export default ReactSpringGestureTest;
